<template>
	<div>
		<cl-crud @load="onLoad">
			<!--渲染表头-->
			<template #table-header-todayRegisterUserCount="{ scope }">
				注册用户
				<el-tooltip content="时间筛选区间产生的注册用户">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>
			<template #table-header-totalRegisterUserCount="{ scope }">
				累计注册
				<el-tooltip content="截止至今产生的注册用户">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>
			<template #table-header-todayCount="{ scope }">
				今日转化用户
				<el-tooltip content="今日下载并下单的用户（前一天下载的，第二天下单的算第二天转化）">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>
			<template #table-header-totalCount="{ scope }">
				累计转化用户
				<el-tooltip content="累计下载并下单的用户">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>
			<template #table-header-rate="{ scope }">
				当日转化率
				<el-tooltip content="转化用户/当日注册用户数">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>
			<template #table-header-repurchaseUser="{ scope }">
				复购用户
				<el-tooltip content="第二次下单的用户（除了记录第二次下单，之后的每次下单都要记录时间）">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>
			<template #table-header-mdGoodsCount="{ scope }">
				免单数量
				<el-tooltip content="领取新人免单并下单的数量">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>
			<template #table-header-averageOutput="{ scope }">
				单产
				<el-tooltip content="人均单产=当天效果预估/累计注册数/1">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>
			<template #table-header-usercommission="{ scope }">
				客户佣金
				<el-tooltip content="单笔客户佣金=商品总佣金*对应返利比例（这里的返利比例我们后台填写的给用户的阶梯返利比例）
（客户佣金=所有单笔客户佣金总和）（免单、百亿补贴、新人专享除外）">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>
			<template #table-header-mdGoodsCost="{ scope }">
				免单成本
				<el-tooltip content="当日免单总支出-(免单产品总佣金*0.8)">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>
			<template #table-header-mdRate="{ scope }">
				免单率
				<el-tooltip content="免单数量/累计注册数">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>
			<template #table-header-orderCommission="{ scope }">
				效果预估
				<el-tooltip content="当日淘宝联盟预估效果佣金">
					<i class="el-icon-question" style="cursor: pointer"></i>
				</el-tooltip>
			</template>

			<template #slot-filter>
				<div style="margin-left: 10px;">
					<date-picker
						:date="dateArr"
						@change="
							val =>
								crud.refresh({
									startTime: val[0],
									endTime: val[1],
									page: 1
								})
						"
						@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>
				<div style="margin: 0 10px;">
					<el-select
						v-model="channelVal"
						size="mini"
						placeholder="请选择渠道"
						@change="val => crud.refresh({ channel: val, page: 1 })"
					>
						<el-option value label="全部"></el-option>
						<el-option
							v-for="(item, index) in channelList"
							:key="index"
							:value="item"
							:label="item | channelUnit"
						></el-option>
					</el-select>
				</div>
			</template>
			<template #table-column-channelName="{scope}">
                <el-tooltip class="item" effect="dark" content="查看渠道明细" placement="top-start" v-if="scope.row.channelName === '自然流量'">
                    <el-button type="text" @click="channelDetail(scope.row)">{{ scope.row.channelName }}</el-button>
                </el-tooltip>
                <span v-else>{{ scope.row.channelName }}</span>
            </template>
			<template #table-column-startTime="{scope}">{{ scope.row.startTime }}</template>
			<template #table-column-mdRate="{scope}">{{ scope.row.mdRate | numUnit }}</template>
			<!-- 效果预估 -->
			<template #table-column-orderCommission="{scope}">{{
				scope.row.orderCommission | numUnit
			}}</template>
			<!-- 单产 -->
			<template #table-column-averageOutput="{scope}">{{
				scope.row.averageOutput | numUnit
			}}</template>
			<!-- 客户佣金 -->
			<template #table-column-usercommission="{scope}">{{
				scope.row.usercommission | numUnit
			}}</template>
			<!-- 支付宝提现 -->
			<template #table-column-withdraw="{scope}">{{ scope.row.withdraw | numUnit }}</template>
			<!-- 免单成本 -->
			<template #table-column-mdGoodsCost="{scope}">{{
				scope.row.mdGoodsCost | numUnit
			}}</template>
			<template #slot-export>
				<el-button size="mini" type="primary" @click="exportReport">导出报表</el-button>
			</template>
			<template #slot-calculation>
				<el-button size="mini" type="info" @click="dialogVisible = true"
					>计算方式</el-button
				>
			</template>
			<template #slot-export-li="{scope}">
				<el-button size="mini" type="primary" @click="exportReportSingle(scope.row.channel)"
					>导出报表</el-button
				>
			</template>
		</cl-crud>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="800px">
			<div class="calculation-value">
				转化用户：下载并下单的用户（前一天下载的，第二天下单的算第二天转化）
			</div>
			<div class="calculation-value">
				复购用户：第二次下单的用户（除了记录第二次下单，之后的每次下单都要记录时间）
			</div>
			<div class="calculation-value">当日转化率：转化用户/当日注册用户数</div>
			<div class="calculation-value">复购用户：大于等于2次下单的用户</div>
			<div class="calculation-value">人均单产：当天效果预估/累计注册数/1</div>
			<div class="calculation-value">
				单笔客户佣金=商品总佣金*对应返利比例（这里的返利比例我们后台填写的给用户的阶梯返利比例）
			</div>
			<div class="calculation-value">
				（客户佣金=所有单笔客户佣金总和）（免单、百亿补贴、新人专享除外）
			</div>
			<div class="calculation-value">免单成本=当日免单总支出-(免单产品总佣金*0.8)</div>
			<div class="calculation-value">免单率：免单数量/累计注册数</div>
			<div class="calculation-value">效果预估：当日淘宝联盟预估效果佣金</div>
		</el-dialog>

        <channel-dig ref="channelDig"></channel-dig>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker2';
import moment from 'moment';
import { download } from '@/utils/index';
import ChannelDig from './components/channel-dig'

export default {
	components: {
		DatePicker,
		ChannelDig
	},
	data() {
		return {
			crud: null,
			channelVal: '',
			channelList: [],
			dialogVisible: false,
			dateArr: [
				moment()
					.startOf('month')
					.format('YYYY-MM-DD 00:00:00'),
				moment().format('YYYY-MM-DD 23:59:59')
			]
		};
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.userMenagement.relation)
				.set('table', {
					columns: [
						{
							label: '渠道名称',
							prop: 'channelName',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '注册用户',
							prop: 'todayRegisterUserCount',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '累计注册',
							prop: 'totalRegisterUserCount',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '今日转化用户',
							prop: 'todayCount',
							align: 'center',
							'min-width': '130'
						},
						{
							label: '累计转化用户',
							prop: 'totalCount',
							align: 'center',
							'min-width': '130'
						},
						{
							label: '当日转化率',
							prop: 'rate',
							align: 'center',
							'min-width': '130'
						},
						{
							label: '免单数量',
							prop: 'mdGoodsCount',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '复购用户',
							prop: 'repurchaseUser',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '淘礼金金额',
							prop: 'tljMoney',
							align: 'center',
							'min-width': '100',
							emptyText: '0.00'
						},
						{
							label: '效果预估',
							prop: 'orderCommission',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '单产',
							prop: 'averageOutput',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '客户佣金',
							prop: 'usercommission',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '付款订单',
							prop: 'orderNum',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '免单成本',
							prop: 'mdGoodsCost',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '免单率',
							prop: 'mdRate',
							align: 'center',
							'min-width': '100'
						},
						{
							label: '支付宝提现',
							prop: 'withdraw',
							align: 'center',
							'min-width': '100'
						}
					],
					props: {
						stripe: false
					},
					op: {
						layout: ['slot-export-li']
					},
					on: {
						'selection-change': selection => {
							this.selectRow = selection;
						}
					}
				})
				.set('layout', [
					[
						'refresh-btn',
						'add-btn',
						'slot-filter',
						'slot-export',
						'query',
						'flex1',
						'search-key'
					],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.$service.userMenagement.relation
						.channelList()
						.then(res => {
							this.channelList = res;
						})
						.catch(err => {
							this.$message.error(err);
						});
					next(params);
				})
				.done();
			app.refresh({
				startTime: moment()
					.startOf('month')
					.format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
		},
		exportReport() {
			this.$service.userMenagement.relation
				.export({
					startTime: this.crud.getData('params').startTime,
					endTime: this.crud.getData('params').endTime
				})
				.then(res => {
					download({
						data: res,
						fileName: `推广列表-${moment().format('YYYY-MM-DD HH:mm:ss')}`
					});
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		exportReportSingle(val) {
			let channel = '自然流量';
			switch (val) {
				case 'drsj1':
					channel = '多肉商家1';
					break;
				case 'dryc':
					channel = '多肉云仓';
					break;
				case 'dryh':
					channel = '多肉用户';
					break;
				case 'dymkf':
					channel = '抖音麦克风';
					break;
				case 'other':
					channel = '自然流量';
					break;
				case 'ycfs':
					channel = '云仓粉丝';
					break;
				case 'rwll':
					channel = '任务流量';
					break;
			}
			this.$service.userMenagement.relation
				.export({
					startTime: this.crud.getData('params').startTime,
					endTime: this.crud.getData('params').endTime,
					channel: val || ''
				})
				.then(res => {
					download({
						data: res,
						fileName: `推广列表-${channel}-${moment().format('YYYY-MM-DD HH:mm:ss')}`
					});
				})
				.catch(err => {
					this.$message.error(err);
				});
		},
		channelDetail(item) {
			this.$refs.channelDig.open(item.lower)
        }
	},
	filters: {
		timeFilter(val) {
			return moment(val).format('YYYY-MM-DD');
		},
		numUnit(val) {
			return Number(val).toFixed(2);
		},
		channelUnit(val) {
			switch (val) {
				case 'drsj1':
					return '多肉商家1';
				case 'dryc':
					return '多肉云仓';
				case 'dryh':
					return '多肉用户';
				case 'dymkf':
					return '抖音麦克风';
				case 'other':
					return '自然流量';
				case 'ycfs':
					return '云仓粉丝';
				case 'rwll':
					return '任务流量';
				case 'xiaomi':
					return '小米';
				case 'vivo':
					return 'VIVO';
				case 'oppo':
					return 'OPPO';
				case 'huawei':
					return '华为';
				case 'yyb':
					return '应用宝';
				case 'douyin':
					return '抖音';
				case 'guanwang':
					return '官网';
				case 'ios':
					return 'AppStore';
				case 'kmi':
					return 'K米';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.calculation-value {
	padding: 10px;
}
    .show-lower {
        color: $main-color;
        cursor: pointer;
    }
</style>
